<template>
  <div>
    <fc-table-search
      ref="table"
      :form-items="formItems"
      :table-columns="tableColumns"
      :form-config="{'label-width':'100px'}"
      @requestMethod="getTableData"
    >
      <template #handleDetail="{row}">
        <el-button
          type="text"
          size="mini"
          @click="onEdit(row.id)"
        >
          编辑
        </el-button>
        <el-button
          type="text"
          size="mini"
          @click="onToggleActivity(row)"
        >
          {{ row.isAbled===0?'上线':'下线' }}
        </el-button>
        <el-button
          type="text"
          size="mini"
          @click="onPreview(row.id,row)"
        >
          预览
        </el-button>
        <el-button
          type="text"
          size="mini"
          @click="onDelete(row)"
        >
          删除
        </el-button>
      </template>
      <template slot="handleLeft">
        <el-button type="primary" @click="onAdd">
          <i class="el-icon-plus">新增页面</i>
        </el-button>
      </template>
    </fc-table-search>
  </div>
</template>

<script>
import {getCmsPageList, updateStatus, deletePage} from '@/api/activity'
import {forEach} from 'lodash-es'
import { mixins } from "@/mixin/index";
export default {
  mixins: [mixins],
  data() {
    return {
      formItems: [
        {
          comp: 'input',
          prop: 'name',
          label: '页面标题',
          clearable: true
        }, {
          comp: 'select',
          prop: 'isAbled',
          label: '页面状态',
          options: [
            {
              value: 0,
              label: '下线'
            },
            {
              value: 1,
              label: '上线'
            }
          ],
          includeAll: false
        }
      ],
      tableColumns: [
        {
          prop: 'id',
          label: '页面ID'
        }, {
          prop: 'name',
          label: '页面标题'
        }, {
          prop: 'status',
          label: '页面状态'
        }, {
          prop: 'create_time',
          label: '创建时间'
        }, {
          prop: 'update_time',
          label: '更新时间'
        }, {
          label: '操作',
          fixed: 'right',
          slotName: 'handleDetail'
        }
      ]
    }
  },
  methods: {
    async getTableData({current, size, ...tableData}, fn) {
      try {
        let {...params} = tableData
        params.pageNum = current
        params.pageSize = size
        params.creator = window.localStorage.getItem('username')
        let res = await getCmsPageList(params)
        let {list, total} = res.data
        forEach(list, item => {
          item.status = item.is_abled ? '上线' : '下线'
          item.isAbled = item.is_abled
        })

        fn({
          data: list || [],
          total
        })
      } catch (error) {
        fn({message: error.message})
      }
    },
    onEdit(id) {
      this.$router.open({path: '/decorate', query: {id}})
    },
    onToggleActivity(row) {
      if (row.isAbled === 0) {
        this.online(row, 1)
      } else {
        this.offline(row, 0)
      }
    },
    online(row, isAbled) {
      this.$set(row, 'loading', true)
      updateStatus({id: row.id, isAbled}).then(() => {
        this.$message.success('上线成功')
        this.$refs.table.onRefresh(true)
        this.addLogList(row,'上线成功')
      }).catch(err => {
        this.addLogList(row,`操作失败：${err.message}`)
        this.$message.warning(`操作失败：${err.message}`, 'warning')
      }).finally(() => {
        this.$set(row, 'loading', false)
      })
    },
    offline(row, isAbled) {
      this.$confirm(`是否确认下线活动【${row.name}】?`, '提示', {
        confirmButtonText: '确定',
        cancalButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false
      }).then(() => {
        updateStatus({id: row.id, isAbled}).then(() => {
          this.$message.success('下线成功')
          this.$refs.table.onRefresh(true)
          this.addLogList(row,'下线成功')
        }).catch(err => {
          this.addLogList(row,`操作失败：${err.message}`)
          this.$message.warning(`操作失败：${err.message}`, 'warning')
        })
      })
    },
    onPreview(id,row) {
      let url = this.$router.resolve({path: '/preview', query: {id, data: this.$store.state.wxParams}})
      window.open(url.href, '_blank')
      this.addLogList(row,`预览：${row.name}`)
    },
    onDelete(row) {
      const id=row.id
      this.$confirm(`是否确定删除？`, '提示', {
        confirmButtonText: '确定',
        cancalButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false
      }).then(() => {
        deletePage({id}).then(() => {
          this.$message.success('删除成功')
          this.$refs.table.onRefresh(true)
          this.addLogList(row,'删除成功')
        }).catch(err => {
          this.$message.warning(`删除失败：${err.message}`, 'warning')
          this.addLogList(row,`删除失败：${err.message}`)
        })
      })
    },
    onAdd() {
      this.$router.open('/decorate')
    }
  }
}
</script>

<style>

</style>
